<template>
  <div>
    <AppHeader></AppHeader>
    <div class="content" @scroll="handleScroll">
      <NuxtPage style="background: white"></NuxtPage>
    </div>
    <AppFooter></AppFooter>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted } from "vue";
import { useHeaderStore } from "@/store/header";
const header = useHeaderStore();
const scrollY = ref(0);
const handleScroll = () => {
  // console.log("111", window.scrollY); // 输出当前页面滚动的距离
  if (window.scrollY == 0) {
    header.scoll = false;
  } else if (window.scrollY - scrollY.value > 0) {
    header.scoll = true;
  } else if (window.scrollY - scrollY.value < 0) {
    header.scoll = false;
  }
  scrollY.value = window.scrollY;
};

onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>

<style lang="less" scoped>
.content {
  background: #f7f8f9;
  overflow: auto;
  min-height: 100vh;
}
</style>
